<template>
	<view class="u-page">
		<view class="head">
			<div class="headline">
				<u-icon name="arrow-left" color="white" size="20" @tap="goBack()"></u-icon>
				<p class="dialogName">小艾</p>
				<u-icon name="bell" color="white" size="25"></u-icon>
			</div>
		</view>
		<view class="dialogBody">
			<p class="time">2023-3-31 9:36</p>
			<p class="oppositePerson">
				<u--image  src="../../static/tu/头像2.png" shape="circle" width="45px" height="45px"></u--image>
				<span class="massage1">您好,我看您这明天是去深圳的顺风车,方便搭个伴吗?男生一枚...</span>
			</p>
			<p class="myMassage">				
				<u--image  src="../../static/tu/touxiang1.png" shape="circle" width="45px" height="45px"></u--image>
				<span class="massage2">您好，没问题啊，明天几点</span>
			</p>
			<p class="myMassage">
				<u--image  src="../../static/tu/touxiang1.png" shape="circle" width="45px" height="45px"></u--image> 
				<span class="massage2">请问您的行李多吗，我这边的行李可能会 多一点那，可以吗？</span>
			</p>
			<p class="oppositePerson">
				<u--image  src="../../static/tu/头像2.png" shape="circle" width="45px" height="45px"></u--image>
				<span class="massage1">我没什么行李，就一个随身携带的背包,不要紧的</span>
			</p>
			<p class="myMassage">
				<u--image  src="../../static/tu/touxiang1.png" shape="circle" width="45px" height="45px"></u--image> 
				<span class="voiceMassage">
					<u--image class="voiceImage" src="../../static/tu/语音.png" width="45px" height="20px"></u--image>
					<span class="voiceTime">6s</span>
				</span>
			</p>
		</view>
		<view class="bottom">
			<input type="text" class="transmitMassage">
			<u--image class="bottomFunction" src="../../static/tu/表情.png" shape="circle" width="23px" height="23px"></u--image>
			<u-icon class="bottomFunction" name="plus-circle" color="black" size="25"></u-icon>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			goBack() {
				// 多层级下用这个
				uni.navigateBack({
					//关闭当前页面，返回上一页面或多级页面。
					delta: 1
				});
			}
		}
	}
</script>

<style>
	.head{
		margin:0px;
		background: url(../../static/tu/duihuabg.png) no-repeat;
		background-size:100% 100%;
		width: 100%;
		height: 65px;
		/* position: absolute; */
	}
	.headline{
		padding-top: 28px;
		padding-left: 15px;
		padding-right: 15px;
		/*设置显示样式**/
		display: flex;
		/**子view垂直居中*/
		align-items: center;
		/**垂直居中*/
		vertical-align: center;
		/* 子view排列方式row--水平 column--垂直 */
		flex-direction: row;
		/* position: relative; */
	}
	.dialogName{
		margin: auto;
		color:white;
	}
	.dialogBody{
		width: 100%;
		margin-top: 5px;
	}
	.time{
		margin: auto;
		text-align: center;
		color: gray;
	}
	.oppositePerson{
		margin-left: 10px;
		margin-top:10px ;
		/*设置显示样式**/
		display: flex;
		/**子view垂直居中*/
		align-items: center;
		/**垂直居中*/
		vertical-align: center;
		/* 子view排列方式row--水平 column--垂直 */
		flex-direction: row;
	}
	.massage1{
		margin-left: 10px;
		width: 190px;
		font-size: 14px;
		line-height: 25px;
		background-image: linear-gradient(to top, #95e3eb,#ccf6fe );
        border-radius: 10px;
	}
	.myMassage{
		margin-right: 10px;
		margin-top:10px ;
		/*设置显示样式**/
		display: flex;
		/**子view垂直居中*/
		align-items: center;
		/**垂直居中*/
		vertical-align: center;
		/* 子view排列方式row--水平 column--垂直 */
		flex-direction: row-reverse;
	}
	.massage2{
		margin-right: 10px;
		padding-left:2px ;
		width: 190px;
		font-size: 14px;
		line-height: 25px;
		background-image: linear-gradient(to top, #4481EB,#04BEFE );
	    border-radius: 10px;
		color: white;
	}
	.voiceMassage{
		margin-right: 10px;
		padding-left:2px ;
		width: 190px;
		height: 30px;
		font-size: 14px;
		line-height: 25px;
		/*设置显示样式**/
		display: flex;
		/**子view垂直居中*/
		align-items: center;
		/**垂直居中*/
		vertical-align: center;
		/* 子view排列方式row--水平 column--垂直 */
		flex-direction: row;
		background-image: linear-gradient(to top, #4481EB,#04BEFE );
		border-radius: 10px;
	}
	.voiceImage{
		margin-left: 10px;
	}
	.voiceTime{
		color: white;
		font-size: 15px;
		margin-left: 100px;
	}
	.bottom{
		width: 100%;
		height: 40px;
		padding-left: 10px;
		background-color: #E6E6E6;
		/*设置显示样式**/
		display: flex;
		/**子view垂直居中*/
		align-items: center;
		/**垂直居中*/
		vertical-align: center;
		/* 子view排列方式row--水平 column--垂直 */
		flex-direction: row;
		position: fixed;
		bottom: 0px;
	}
	.transmitMassage{
		width: 70%;
		height: 30px;
		background-color: white;
		border-radius: 10px;
	}
	.bottomFunction{
		margin-left: 18px;
	}
</style>